<template>
  <div class="personal-main">
    <div class="personal-pay">
      <h3><i>充值</i></h3>
      <div class="quick-pay-wrap">
        <h4>
          <span class="quick-tit pay-cur"><em>汇付宝充值</em></span>
        </h4>
        <form id="form" name="form" method="post" action="">
          <div class="quick-main">
            <div class="fl quick-info">
              <div class="info-1">
                <span class="info-tit">充值金额</span>
                <span class="info1-input">
                  <input
                    type="text"
                    class="pay-money-txt"
                    maxlength="10"
                    v-model="chargeAmt"
                  />
                  <em>元</em>
                </span>
              </div>
              <div class="bank-check" id="bank-check2">
                <b class="selected" id="bankProtocol1"></b>
                <span class="bank-agree">
                  我同意并接受
                  <a href="#" target="_blank">
                    《尚融宝投资咨询与管理服务电子协议》
                  </a>
                </span>
              </div>
              <input
                type="button"
                value="充值"
                class="btn-paycz"
                @click="commitCharge()"
              />
            </div>

            <div class="pay-tipcon" style="height: 110px;">
              <b>温馨提示：</b><br />
              1、为了您的资金安全，您的账户资金由第三方汇付宝进行托管。<br />
              2、充值前请注意您的银行卡充值限额，以免造成不便。<br />
              3、为了您的资金安全，建议充值前进行实名认证。<br />
              4、如果充值遇到任何问题，请联系客服：4006-001-999。
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chargeAmt: 0,
    };
  },
  methods: {
    //充值按钮事件函数
    commitCharge() {
      let token = localStorage.getItem("SRB-TOKEN");
      //3、如果没有srb-token结束
      if (!token) {
        this.$message.warning("请先登录!!!");
        return;
      }
      if (this.chargeAmt <= 0) {
        this.$message.warning("请输入正确的充值金额!!!");
        return;
      }
      this.$alert(
        '<div style="size: 18px;color: red;">您即将前往汇付宝充值</div>',
        "前往汇付宝资金托管平台",
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: "立即前往",
          callback: (action) => {
            //action:  confirm=>点击立即前往   cancel=>点击X
            // console.log("callback:", action);
            if (action === "confirm") {
              // 提交用户信息
              this.$axios({
                url: `/api/core/userAccount/auth/recharge/${this.chargeAmt}`,
                method: "post",
                headers: { token },
              }).then((r) => {
                //r代表响应报文
                console.log(r.data.data);
                //将解析到的页面内容 通过dom对象写入到页面中执行
                document.write(r.data.data.form);
              });
            }
          },
        }
      );
    },
  },
};
</script>
